<template>
    <el-table :data="attendanceRecords" style="width: 100%">
      <el-table-column prop="id" label="考勤记录ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column prop="checkInTime" label="签到时间"></el-table-column>
      <el-table-column prop="checkOutTime" label="签退时间"></el-table-column>
      <el-table-column label="考勤状态">
        <template #default="{ row }">
          <span v-if="row.status === '正常'">正常</span>
          <span v-if="row.status === '迟到'">迟到</span>
          <span v-if="row.status === '早退'">早退</span>
          <span v-if="row.status === '缺勤'">缺勤</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="handleEditAttendance(row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDeleteAttendance(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup>
  import router from '@/router';
  import { ref, onMounted } from 'vue';
  const attendanceRecords = ref([
    // 考勤记录数据
    { id: 1, username: '张三', realName: '张三', checkInTime: '2023-01-01 09:00', checkOutTime: '2023-01-01 18:00', status: '正常' },
    { id: 2, username: '李四', realName: '李四', checkInTime: '2023-01-02 09:30', checkOutTime: '2023-01-02 18:00', status: '迟到' },
    // ...更多考勤记录数据
  ]);
  
  const handleEditAttendance = (attendance) => {
    // 处理修改考勤记录逻辑
    console.log('修改考勤记录:', attendance);
    // 在这里添加修改考勤记录信息的逻辑
    router.push("modifyAttendance");
  };
  
  const handleDeleteAttendance = (attendance) => {
    // 处理删除考勤记录逻辑
    console.log('删除考勤记录:', attendance);
    // 在这里添加删除考勤记录信息的逻辑
    // 例如，从attendanceRecords数组中移除该考勤记录
    attendanceRecords.value = attendanceRecords.value.filter(record => record.id !== attendance.id);
  };
  </script>
  
  <style>
  /* 自定义样式 */
  .attendance-list {
    margin-top: 20px;
  }
  </style>
  